<template>
  <div class="message">
    <div><h1>这是一个收料单主题名称+编号</h1></div>
    <div>
      <el-form
        :inline="true"
        ref="form"
        type="text"
        :model="form"
        size="medium"
        label-width="150px"
        style="margin: 20px 80px 0 10px"
      >
        <el-form-item label="创建人:">
          <span>{{ form.createBy }}</span>
        </el-form-item>

        <el-form-item label="创建时间:">
          <span>{{ form.createTime }}</span>
        </el-form-item>
        <el-form-item label="最后修改人:">
          <span>{{ form.updateBy }}</span>
        </el-form-item>
        <el-form-item label="修改时间:">
          <span>{{ form.updateTime }}</span>
        </el-form-item>
      </el-form>
    </div>
    <h2>基础信息</h2>
    <el-form
      :model="queryParams"
      :rules="rules"
      ref="queryForm"
      :visible.sync="open"
      size="small"
      :inline="true"
      label-width="68px"
    >
      

      <!-- <el-form-item label="物料类别" prop="categoryNo">
        <el-select v-model="queryParams.categoryNo" filterable allow-create default-first-option placeholder="供应商名称">
          <el-option v-for="item in wuxia" :key="item.value" :label="item.categoryNo" :value="item.categoryNo">
          </el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item label="物料名称" prop="categoryName">
        <el-input v-model="queryParams.categoryName" placeholder="请输入物料名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item> -->

      <el-form-item label="供应商名称" prop="supplierName">
        <el-select
          v-model="queryParams.supplierName"
          filterable
          allow-create
          default-first-option
          placeholder="供应商名称"
        >
          <el-option
            v-for="item in xialakuang"
            :key="item.value"
            :label="item.supplierName"
            :value="item.supplierName"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="收料主题" prop="supplierTheme">
        <el-input
          v-model="queryParams.supplierTheme"
          placeholder="请输入收料人员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="收料单号" prop="receiptMaterialNo">
        <el-input v-model="queryParams.receiptMaterialNo" placeholder="请输入收料单号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>


      <el-form-item label="运输单位" prop="transportUnit">
        <el-input v-model="queryParams.transportUnit" placeholder="请输入运输单位" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="运费（元）" prop="freight">
        <el-input v-model="queryParams.freight" placeholder="请输入运费" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="收料人" prop="materialPerson">
        <el-input v-model="queryParams.materialPerson" placeholder="请输入收料人" clearable
          @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="收料时间">
        <el-date-picker v-model="materialTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item label="仓库" prop="warehouseName">
        <el-select
          v-model="queryParams.warehouseName"
          filterable
          allow-create
          default-first-option
          placeholder="仓库名称"
        >
          <el-option
            v-for="item in cangkuList"
            :key="item.value"
            :label="item.warehouseName"
            :value="item.warehouseName"
          >
          </el-option>
        </el-select> -
        <el-select
          v-model="queryParams.warehouseName"
          filterable
          allow-create
          default-first-option
          placeholder="仓库区域"
        >
          <el-option
            v-for="item in cangkuList"
            :key="item.value"
            :label="item.warehouseName"
            :value="item.warehouseName"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <h1>物料明细</h1>
    <el-row>
  <el-button type="primary"  @click="tianjia" >添加</el-button>
  <el-button type="primary">批量删除</el-button>
  <el-dialog title="添加物料" :visible.sync="dialogTableVisible">
  <div class="tables">
        <el-form>
          <!-- <h3>添加物料</h3> -->
          <el-table
            border
            :data='listNum'
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="SelectionChange"
          >
          <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="materialType" label="物料类别" width="120">
            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物料名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="specifications"
              label="规格"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="收料数量"
              show-overflow-tooltip
            >
            
            </el-table-column>

            <!-- <el-table-column prop="handle" label="操作" show-overflow-tooltip> -->
              <!-- <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" :disabled="jinyong" @click="handleDelete(scope.row)"
            v-hasPermi="['system:info:remove']">删除&emsp;|</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit" :disabled="jinyong" @click="handleUpdate(scope.row)"
            v-hasPermi="['system:info:edit']">&emsp;分配详情</el-button>
              </template> -->
            <!-- </el-table-column> -->
          </el-table>
        </el-form>



<el-form>
          <h3>分配项目</h3>
          <el-table
            border
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <!-- <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号" prop="id" width="120">
            </el-table-column> -->
            <el-table-column
              prop=""
              label="项目名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="分配数量"
              show-overflow-tooltip
            >
            </el-table-column>
            
            

            <el-table-column prop="handle" label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-row>
  <el-button type="success" icon="el-icon-circle-plus-outline" circle></el-button>
  <el-button type="danger" icon="el-icon-remove-outline" circle></el-button>
</el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-form>


        <div slot="footer" class="dialog-footer">
          <el-button @click="qx">取 消</el-button>
          <el-button type="primary" @click="Tkqueding">确 定</el-button>
        </div>
      </div>
</el-dialog>
  <!-- 下面表格 -->
      <div class="tables"  style="margin-top:20px;">
        <el-form>
          <el-table
          :data="listNum1"
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号" prop="id" width="120">
            </el-table-column>
            <el-table-column prop="materialType" label="物料类别" width="120">

            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物料名称"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="specifications"
              label="规格"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="count"
              label="收料数量"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column prop="handle" label="操作" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete"  @click="handleDelete(scope.row)"
            v-hasPermi="['system:info:remove']">删除&emsp;|</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit"  @click="handleUpdate(scope.row)"
            v-hasPermi="['system:info:edit']">&emsp;分配详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button>取 消</el-button>
          <el-button type="primary" @click="queding">确 定</el-button>
        </div>
      </div>
    </el-row>
  </div>
</template>
<script>
import {
  listInfo,
  Querying,
  Xiugai,
  supplierDropDown,
} from "@/api/material/MaterialInfo";
export default {
  data() {
    return {
      open:true,
      cangkuList:[],
      nums:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {},
      listNum:[],
      listNum1:[],
      lit: [],
      arr1:[],
      xialakuang: [],
      materialTime:null,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createBy: null,
        receiptMaterialNo: null,
        categoryName: null,
        supplierTheme: null,
        supplierName: null,
        materialType: null,
        warehouseName: null,
        warehouseArea: null,
        materialPerson: null,
        materialTime: null,
        projectNo: null,
        categoryNo: null,
        specifications: null,
        unit: null,
        materialName: null,
        count: null,
        updateTime: null,
        xiangmuming: "这是假的",
      },
      // 表单校验
      rules: {
        supplierTheme: [
          { required: true, message: "收料主题不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    Querying(this.$route.query.id).then((response) => {
      this.form = response.data;
      this.Lit = response.data.materialInfoList;
      console.log("form", this.form);
      console.log("Lit", this.Lit);
    });
    supplierDropDown(this.queryParams).then((res) => {
      for (let i = 0; i < res.rows.length; i++) {
        this.xialakuang = res.rows[i].supplierName;
        this.xialakuang = res.rows;
      }
    });
  },
  methods: {
    SelectionChange(val){
console.log(val)
this.arr1 = val
    },
    tianjia(){
this.dialogTableVisible = true;
listInfo(this.queryParams).then(res=>{
        this.listNum = []
        for (let i = 0; i < res.rows.length; i++) {
          let item = res.rows[i].materialInfoList
          console.log(item)
          for(let j = 0;j<item.length;j++){
          this.listNum.push(item[j]);
          }
        }
        
      })
    },
    handleChange(value) {
        console.log(value);
      },
      qx(){
this.dialogTableVisible = false
      },
      Tkqueding(){
this.dialogTableVisible = false
this.listNum1 = this.arr1
      },
      
    queding(){
      console.log(132321)
          this.$refs['queryForm'].validate(valid=>{
            if(valid){
                Xiugai(this.form).then(response => {
                  console.log(response)
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                  
            });this.$router.go(-1)
            }
          })
          
          },
          handleDelete(){
            const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除收料单信息编号为"' + ids + '"的数据项？').then(function () {
        return delInfo(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
          
handleUpdate() {
      this.dialogTableVisible = true;
    },
    reset() {
      this.form = {
        id: null,
        receiptMaterialNo: null,
        supplierTheme: null,
        supplierName: null,
        categoryName: null,
        materialType: null,
        summary: null,
        warehouseName: null,
        warehouseArea: null,
        materialPerson: null,
        materialTime: null,
        supplierNo: null,
        transportUnit: null,
        carNumber: null,
        freight: null,
        categoryNo: null,
        createTime: null,
        createBy: null,
        comment: null,
        projectNo: null
      };
      this.resetForm("form");
    },
    Off() {
      this.$router.go(-1);
    },
    },
    
    
  }
</script>
<style lang="scss" scoped>
h2 {
  width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  border-bottom: 1px solid red;
  margin: 60px 0 20px 5px;
}
.el-input__inner {
  border: 1px solid;
}

.dialog-footer {
  text-align: center;
  margin-top: 15px;
}
.outers .headers {
  width: 100%;
  height: 50px;

  border-bottom: 1px solid gainsboro;
  h1 {
    margin-left: 50px;
    padding-top: 10px;
  }
}

.bottom {
  margin-left: 30px;
  margin-top: 0px;
  .adds {
    display: flex;
    margin-bottom: 10px;
  }
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.message {
  padding-left: 20px;
  width: 50%vh;
  height: 170px;
  margin-right: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  border: 1px solid gainsboro;
  border-radius: 1rem;
  margin-top: 15px;
  span {
    font-size: 20px;
    margin-right: 120px;
  }
}
.gongying {
  width: 100%;
  text-align: center;
  tr {
    height: 50px;
    line-height: 50px;
  }
}
</style>  